<template>
  <div class="bulk-price">
    <hx-navbar ref="hxnb" :config="config" @clickBtn="clickBtn"></hx-navbar>
    <view class="flex more-view">
      <template>
        <text class="m-l-16">大货报价</text>
      </template>
    </view>

    <u-cell-group>
      <u-cell
        :isLink="true"
        arrow-direction="right"
        rightIconStyle="color:#999;"
      >
        <view
          slot="title"
          class="flex f-30 flex-jsb"
          @click="
            goRoute(
              '/pages/application/pages/information/product-category/components/pricing-unit'
            )
          "
        >
          <view class="w-150 c-99"> 计价单位 </view>
          <view class="flex f-28 grey"> {{ unit.unitName }}</view>
        </view>
      </u-cell>
      <u-gap bgColor="#f6f6f6" height="10"></u-gap>
      <u-radio-group
        class="m-t-20 m-b-20 flex flex-sa flex-aic"
        v-model="radiovalue1"
        placement="row"
        @change="groupChange"
      >
        <u-radio
          :customStyle="{ marginBottom: '8px' }"
          v-for="(item, index) in radiolist1"
          :key="index"
          :label="item.name"
          :name="item.name"
          @change="radioChange"
        >
        </u-radio>
      </u-radio-group>
    </u-cell-group>

    <u-cell-group v-if="radiovalue1 == '按产品数量报价'">
      <u-gap bgColor="#f6f6f6" height="10"></u-gap>
      <u-cell
        :isLink="true"
        arrow-direction="right"
        rightIconStyle="color:#999;"
      >
        <view slot="title" class="flex f-30 flex-jsb">
          <view class="w-200 c-99"> 设置虚拟库存 </view>
          <view class="flex f-28 grey"> 0/{{ unit.unitName }}</view>
        </view>
      </u-cell>
      <u-gap bgColor="#f6f6f6" height="10"></u-gap>

      <u-cell>
        <view slot="title" class="f-30">
          <view class="w-150 c-99"> 价格趋区间 </view>
          <view class="flex f-28 c-black m-t-5 m-l-30 flex-aic">
            起订量
            <u--input
              customStyle="padding:0px"
              class="w-50 m-l-10 m-r-10"
              border="surround"
            ></u--input
            >及以上:
            <u--input
              customStyle="padding:0px"
              class="w-50 m-l-10 m-r-10"
              border="surround"
            ></u--input>
            元/{{ unit.unitName }}
          </view>
        </view>
      </u-cell>
      <div v-for="(item, index) in priceRange" :key="index">
        <u-gap bgColor="#f6f6f6" height="10"></u-gap>
        <u-cell>
          <view slot="title" class="f-30">
            <view class="flex f-28 c-black m-t-5 m-l-30 flex-aic">
              <u-icon
                name="minus-circle-fill"
                color="red"
                size="14"
                class="m-r-10"
              ></u-icon>
              起订量
              <u--input
                customStyle="padding:0px"
                class="w-50 m-l-10 m-r-10"
                border="surround"
              ></u--input
              >及以上:
              <u--input
                customStyle="padding:0px"
                class="w-50 m-l-10 m-r-10"
                border="surround"
              ></u--input>
              元/{{ unit.unitName }}
            </view>
          </view>
        </u-cell>
      </div>

      <u-gap bgColor="#f6f6f6" height="10"></u-gap>
      <u-cell v-if="priceRange.length <= 1">
        <view slot="title" class="f-30">
          <view class="flex f-28 c-black m-t-5 m-l-30 flex-aic">
            <u-icon
              name="plus-circle"
              color="#669df4"
              size="14"
              class="m-r-10"
            ></u-icon>
            添加价格区间
          </view>
        </view>
      </u-cell>
    </u-cell-group>

    <u-cell-group v-if="radiovalue1 == '按产品颜色报价'">
      <u-gap bgColor="#f6f6f6" height="10"></u-gap>
      <u-cell
        :isLink="true"
        arrow-direction="right"
        rightIconStyle="color:#999;"
      >
        <view slot="title" class="flex f-30 flex-jsb">
          <view class="w-300 c-99"> 批量设置最大货价格 </view>
          <view class="ce w-260 flex f-28 grey flex-aic">
            <u--input
              @change="cuttingSamplesChange"
              class="m-r-10"
              color="#6e97d9"
              type="number"
              border="none"
              placeholder="请输入统一价格"
            ></u--input
            >/{{ unit.unitName }}</view
          >
        </view>
      </u-cell>
      <u-gap bgColor="#f6f6f6" height="10"></u-gap>

      <u-cell
        :isLink="true"
        arrow-direction="right"
        rightIconStyle="color:#999;"
      >
        <view slot="title" class="flex f-30 flex-jsb">
          <view class="w-300 c-99"> 批量设置虚拟库存 </view>
          <view class="ce w-260 flex f-28 grey flex-aic">
            <u--input
              class="m-r-10"
              color="#6e97d9"
              type="number"
              border="none"
              placeholder="请输入虚拟库存"
            ></u--input
            >/{{ unit.unitName }}</view
          >
        </view>
      </u-cell>
    </u-cell-group>

    <u-gap
      v-if="radiovalue1 == '按产品颜色报价'"
      bgColor="#f6f6f6"
      height="10"
    ></u-gap>
    <u-grid
      v-if="radiovalue1 == '按产品颜色报价'"
      ref="tabBarSearch"
      :border="false"
      class="tabBarSearch"
    >
      <u-grid-item class="tabBarSearchItem">
        <view class="title">
          <text>颜色</text>
        </view>
      </u-grid-item>
      <u-grid-item>
        <view class="title">
          <text>大货价</text>
        </view>
      </u-grid-item>
      <u-grid-item class="tabBarSearchItem">
        <view class="title">
          <text>虚拟库存</text>
        </view>
      </u-grid-item>
    </u-grid>
    <div v-if="radiovalue1 == '按产品颜色报价'">
      <u-row
        class="tabBarSearch"
        customStyle="margin-bottom: 10px"
        v-for="(baseListItem, baseListIndex) in bulkPriceList"
        :key="baseListIndex"
        align
      >
        <u-col span="4">
          <view class="tabBarSearchItem">
            {{ baseListItem.colorNumber || "-" }}
          </view>
        </u-col>
        <u-col span="4">
          <view class="tabBarSearchItem orange flex flex-aic">
            <u--input
              class="m-r-10"
              color="#6e97d9"
              type="number"
              border="none"
              v-model="baseListItem.price"
              placeholder="请输入价格"
            ></u--input>
          </view>
        </u-col>
        <u-col span="4">
          <view class="tabBarSearchItem c-blue">
            {{ baseListItem.inventory || "-" }}
          </view>
        </u-col>
      </u-row>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      config: {
        title: "产品价格",
        color: "#ffffff",
        //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
        backgroundColor: [1, ["#409EFF", "#409EFF", "#60b4f6", "#60b4f6"]],
        rightButton: [
          {
            key: "btn1",
            icon: "",
            txt: "编辑",
            position: "left",
          },
        ],
      },
      // 基本案列数据
      radiolist1: [
        {
          name: "按产品数量报价",
          disabled: false,
        },
        {
          name: "按产品颜色报价",
          disabled: false,
        },
      ],
      // u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
      radiovalue1: "按产品颜色报价",
      priceRange: [],
      bulkPriceList: [],
      unit: { unitId: "1597506549310423041", unitName: "米" },
    };
  },
  computed: {},
  methods: {
    cuttingSamplesChange(e) {
      for (let index = 0; index < this.bulkPriceList.length; index++) {
        this.bulkPriceList[index].price = Number(e);
      }
      this.$forceUpdate();
    },
    // 页面跳转
    goRoute(url, item = null, type = null) {
      this.$Router.push({
        path: url,
        query: {
          data: this.$Route.query.id || "",
          item: encodeURIComponent(JSON.stringify(item)),
        },
      });
    },
    groupChange(n) {
      console.log("groupChange", n);
    },
    radioChange(n) {
      console.log("radioChange", n);
    },
    clickBtn() {},
    getListBySpuAndUnit() {},
  },
  onLoad() {
    if(this.$Route.query.unitId){
      this.unit.unitId = this.$Route.query.unitId;
      this.unit.unitName = this.$Route.query.unitName;
    }

    this.bulkPriceList = this.$getPageParams("product-information-detail").item;
    console.log('[ this.bulkPriceList ] >', this.bulkPriceList)
    uni.$on("on-pricing-unit", (data) => {
      this.unit.unitId = data.value;
      this.unit.unitName = data.label;
    });
  },
  beforeDestroy() {
    for (let index = 0; index < this.bulkPriceList.length; index++) {
      this.bulkPriceList[index].unitId = this.unit.unitId;
      this.bulkPriceList[index].priceType = 'normal'
    }
    setTimeout(() => {
      uni.$emit("on-pdcl-arr", {
        type: 5,
        data: this.bulkPriceList,
      });
    }, 500);
    // uni.$off("on-color-data");
    uni.$off("on-pricing-unit");
  },
};
</script>

<style scoped lang="scss">
.bulk-price {
  background: #fff;
}
/deep/ .ce .uni-input-input {
  text-align: right;
}
/deep/ .ce .uni-input-placeholder {
  text-align: end;
  font-size: 14px;
}
/deep/ .uni-input-input {
  text-align: center;
}
/deep/ .uni-input-placeholder {
  text-align: center;
  font-size: 14px;
}
.more-view {
  height: 80rpx;
  background: #f1f1f1;
  align-items: center;
  color: #ccc;
  font-size: 28rpx;
}
.tabBarSearch {
  display: flex;
  justify-content: space-evenly !important;
  padding-top: 15upx;
  padding-bottom: 15upx;
  border-bottom: 1px solid #f6f6f6;

  &.sales {
    margin-top: 110rpx;
  }
  .orange {
    color: #d78755;
  }
  .tabBarSearchItem {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    .title {
      margin-right: 20upx;
      color: #535353bf;
    }
  }
}
</style>